<template>
  <div v-show="$store.state.theme">
    <HeaderTop></HeaderTop>
    <Header id="header" :isFixed="isFixed" :barList="barList" :class="{fixed : isFixed}"></Header>
    <div class="carousel-content" :style="{ marginTop: marginTop }">
      <TemplateClass :barList="barList"></TemplateClass>
      <Carousel :carouselList="banner"></Carousel>
    </div>
    <div class="container-box">
      <div class="advertising-list">
        <a
          target="_blank"
          :href="item.NavigateUrl"
          v-for="(item,i) in bannerList.Advertisements"
          :key="i"
        >
          <img
            :src="item.FileUrl && $store.state.port.ossPath + item.FileUrl"
            alt
            :title="item.AdvertisementName"
          />
        </a>
      </div>
    </div>

    <div class="commend">
      <div class="commend-box" v-for="(item,i) in floor" :key="i">
        <div class="container-menu-wrap">
          <div class="container-title">{{item.ClassName}}</div>
          <div>
            <ul>
              <li
                :class="{'container-menu-list primary-hover':true, primary: !tmp.Enable}"
                v-for="(tmp, id) in item.ProductTypeList"
                :key="id"
                @click.stop="handleChooseMenu(tmp,id,i)"
              >{{tmp.TypeName}}</li>
              <li class="container-menu-list primary-hover" @click="handleToTemp">更多</li>
            </ul>
          </div>
        </div>
        <div class="container-list">
          <div class="container-item" v-for="(items,index) in secondList[i]" :key="index">
            <a :href="`/designer?t=${items.TemplateNumber}`" target="_blank">
              <div class="container-block">
                <div class="block-img-wrap">
                  <img
                    :src="items.FacePicture && $store.state.port.ossPath + items.FacePicture + '!w280.src'"
                    @load="imgLoad"
                    alt
                  />
                  <div
                    class="tooltip"
                    :data-tip="items.IsFavorite == true ? '取消' : '收藏'"
                    @click.stop.prevent="handleCollect(items)"
                  >
                    <img
                      class="likeTemplate"
                      :src="items.IsFavorite == true ? '/img/home/collect_s_icon_hl.png' : '/img/home/collect-icon.png'"
                      alt
                    />
                  </div>
                </div>
                <div class="container-bottom">
                  <p class="bottom-title" :title="items.Name">{{items.Name}}</p>
                  <p class="bottom-tips">
                    <span>{{typeName[i]}}</span>
                    <span>
                      <img :src="$store.state.port.staticPath + '/img/home/user.png'" alt />
                      {{items.Counts}}人使用
                    </span>
                  </p>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="senior">
        <div class="container-box" style="justify-content:center">
          <div>
            <div class="senior-title">
              <p>合作企业</p>
              <p class="subtitle">数万家优质店铺与企业选择我们</p>
            </div>
            <div class="senior-container">
                <img v-for="(item,i) in seniorList.Advertisements" :key="i" :src="$config.static + '/' + item.FileUrl" alt="">
            </div>
            <div class="senior-action">
              <nuxt-link to="/templateList">
                  <button class="senior-btn primary">选择模板</button>
              </nuxt-link>

            </div>
          </div>
        </div>
    </div>
    <ToolsBar></ToolsBar>
    <Footer :articleList="articleList"></Footer>
  </div>
</template>

<script>
import HeaderTop from "@/components/HeaderTop";
import Header from "@/components/home/Header";
import TemplateClass from "@/components/home/TemplateClass";
import Carousel from "@/components/Carousel";
import Footer from "@/components/Footer";
import ToolsBar from "@/components/ToolsBar";
export default {
  name: "home",
  components: {
    HeaderTop,
    Header,
    TemplateClass,
    Carousel,
    Footer,
    ToolsBar
  },
  async asyncData({ app, $axios, route, store, query, req, redirect, error }) {
    if (req) {
      let t = /Android|webOS|iPhone|iPod|BlackBerry/i.test(
        req.headers["user-agent"]
      );
      t ? redirect(store.state.port.MOBILE) : "";
    }
    try {
      let [
        AllTemplate,
        Carousel,
        Steps,
        TempCommend,
        FooterCode,
        FooterArticle,
        seniorList
      ] = await Promise.all([
        $axios.get(store.state.port.AllTemplate),
        $axios.get(store.state.port.Advertise + "?ID=131"),
        $axios.get(store.state.port.Advertise + "?ID=138"),
        $axios.get("/RecommendTemplaleClass?TeamNum=" + "19"),
        $axios.get(store.state.port.Advertise + "?ID=136"),
        $axios.get("/Articles"),
        $axios.get(store.state.port.Advertise + "?ID=141")
      ]);
      return {
        barList: AllTemplate.data,
        banner: Carousel.data,
        bannerList: Steps.data,
        label: TempCommend.data,
        articleList: FooterArticle.data,
        seniorList: seniorList.data,
        isFixed: false,
        marginTop: 0,
        floor: [],
        secondList: [],
        typeName: []
      };
    }catch (err) {
      error({statusCode: '404', message: err})
    }
  },
  scrollToTop: true,
  head() {
    return {
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content: this.$store.state.setting.KeyWords
        },
        {
          hid: "description",
          name: "description",
          content: this.$store.state.setting.Description
        }
      ]
      // style: [
      //   {cssText: '.foo { color: red }', type: 'text/css', id: 'my-theme'}
      // ]
    };
  },
  mounted() {
    this.$setTheme(this.$store);
    this.$store.commit("login/addToKen", localStorage["token"]);
    this.getFloorData();
    window.addEventListener("scroll", this.scrollToTop);
  },
  methods: {
    getFloorData() {
      for (var i = 0; i < this.label.length; i++) {
        if (this.label[i].ProductTypeList[0]) {
          var list = this.label[i].ProductTypeList[0].Templatelist.slice(0, 10);
          this.secondList.push(list);
          this.label[i].ProductTypeList[0].Enable = false;
          this.typeName.push(this.label[i].ProductTypeList[0].TypeName);
          this.floor.push(this.label[i]);
        }
      }
    },
    handleChooseMenu(tmp,id,i) {
      if (!this.floor[i].ProductTypeList[id]) return; // 没有数据直接返回
      this.floor[i].ProductTypeList.Enable = false
      for(var j=0;j<this.floor[i].ProductTypeList.length;j++) {
          this.floor[i].ProductTypeList[j].Enable = true
          if(j == id) {
              this.floor[i].ProductTypeList[j].Enable = false
          }
      }
      this.secondList.splice(i, 1, this.floor[i].ProductTypeList[id].Templatelist.slice(0, 10))
      this.typeName.splice(i,1,tmp.TypeName)
  },
    handleToTemp() {
      this.$router.push("/templatelist");
    },
    // 收藏模板
    handleCollect(item) {
      // console.log(item)
      if (item.IsFavorite == false) {
        var formData = new FormData();
        formData.append("TemplateNumber", item.TemplateNumber);
        formData.append("TeamNum", localStorage["teamNum"]);
        let config = {
          headers: { "Content-Type": "multipart/form-data" }
        };
        this.$axios.post("/FavoritedTemplate", formData, config).then(res => {
          // console.log(res.data)
          if (res.data == true) {
            this.$message({ type: "success", message: "收藏成功" });
            item.IsFavorite = true;
          } else {
            this.$message({ type: "error", message: "收藏失败" });
            return;
          }
        });
      } else {
        var formData = new FormData();
        formData.append("TemplateNumber", item.TemplateNumber);
        formData.append("TeamNum", localStorage["teamNum"]);
        let config = {
          headers: { "Content-Type": "multipart/form-data" }
        };
        this.$axios
          .delete("/FavoritedTemplate", { data: formData }, config)
          .then(res => {
            // console.log(res.data)
            if (res.data == true) {
              this.$message({ type: "success", message: "取消收藏成功" });
              item.IsFavorite = false;
            } else {
              this.$message({ type: "error", message: "取消收藏失败" });
              return;
            }
          });
      }
    },
    imgLoad(e) {
      e.target.classList.add("img-load");
    },

    scrollToTop() {
      let osTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (osTop >= 40) {
        this.isFixed = true;
        this.marginTop = document.querySelector("#header").offsetHeight + "px";
      } else {
        this.isFixed = false;
        this.marginTop = 0;
      }
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  }
};
</script>

<style lang="less" scoped>
.carousel-content {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  min-height: 375px;
  margin: 30px auto 20px;
  padding-top: 25px;
}
.advertising-list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  img {
    cursor: pointer;
  }
}
.commend {
  background: rgba(244, 244, 244, 1);
  border-radius: 10px;
  padding-top: 25px;
  padding-bottom: 25px;
  margin-top: 60px;
}
.commend-box {
  width: 1200px;
  margin: 0 auto;
  .container-menu-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 40px;
    margin-top: 20px;
    .container-title {
      display: inline-block;
      line-height: 40px;
      height: 40px;
      font-size: 30px;
      font-family: MicrosoftYaHei-Bold;
      font-weight: bold;
      color: rgba(76, 77, 85, 1);
    }
    ul {
      width: 100%;
      height: auto;
      display: flex;
      align-items: center;
      .container-menu-list {
        min-width: 86px;
        height: 28px;
        line-height: 28px;
        display: inline-block;
        margin-top: 1px;
        margin-right: 15px;
        padding: 0 15px;
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
        background-color: #fff;
        border-radius: 14px;
        cursor: pointer;
        text-align: center;
        transition: all 0.3s;
      }
      li:last-child {
        margin-right: 0;
      }
    }
  }
  .container-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    .container-item {
      width: 220px;
      cursor: pointer;
      margin-right: 25px;
      margin-bottom: 25px;
      border-radius: 10px;
      transition: all 0.3s;
      &:nth-child(5n){ margin-right: 0;}
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0px 11px 30px 3px rgba(0, 0, 0, 0.2);
      }
      .container-block {
        width: 220px;
        .block-img-wrap {
          width: 100%;
          height: 100%;
          position: relative;
          background: rgba(255, 255, 255, 1);
          border-radius: 10px 10px 0 0;
          min-height: 50px;
          overflow: hidden;
          img {
            width: 102%;
            margin-left: -2px;
            height: auto;
            border-radius: 10px 10px 0 0;
            opacity: 0;
            transition: opacity 0.3s;
          }
          .img-load {
            opacity: 1;
          }
          .tooltip {
            display: none;
            width: 25px;
            height: 25px;
            background: rgba(255, 255, 255, 1);
            border-radius: 5px;
            position: absolute;
            right: 15px;
            top: 15px;
            cursor: pointer;
            &:hover::before {
              content: attr(data-tip);
              font-size: 12px;
              line-height: 12px;
              background-color: #fff;
              color: #626262;
              padding: 4px 6px;
              position: absolute;
              top: 35px;
              left: -2.5px;
              white-space: pre;
              border-radius: 2px;
              box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
            }
            &:hover::after {
              content: "";
              position: absolute;
              width: 0;
              height: 0;
              border-bottom: 4px solid #fff;
              border-left: 4px solid transparent;
              border-right: 4px solid transparent;
              top: 31px;
              left: 11.5px;
            }
            .likeTemplate {
              width: 20px;
              height: 18px;
              margin: 3.5px 2.5px;
              opacity: 1;
            }
          }
        }
      }
      .container-bottom {
        padding: 18px 17px;
        background: rgba(255, 255, 255, 1);
        border-radius: 0 0 10px 10px;
        font-size: 14px;
        .bottom-title {
          display: inline-block;
          color: rgba(51, 51, 51, 1);
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .bottom-tips {
          display: flex;
          justify-content: space-between;
          color: rgba(153, 153, 153, 1);
          font-size: 14px;
          margin-top: 5px;
        }
      }
    }
    .container-item:hover .container-block .tooltip {
      display: block;
    }
  }
}
.senior {
  background-color: #ffffff;
  padding-bottom: 25px;
  .senior-title {
    text-align: center;
    font-size: 29px;
    color: #4c4d55;
    padding: 20px 0;
    .subtitle {
      color: #999;
      font-size: 14px;
    }
  }
  .senior-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .senior-action {
    text-align: center;
    padding: 30px 0;
    .senior-btn {
      display: inline-block;
      border-radius: 31px;
      width: 394px;
      height: 62px;
      line-height: 62px;
      text-align: center;
      font-weight: 700;
      font-size: 22px;
      cursor: pointer;
      user-select: none;
      border: none;
    }
  }
}
</style>

